<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>搜索-月薪过4万</title>
  <!-- 引入mui的样式 -->
  <link rel="stylesheet" href="./assets/mui/css/mui.css">
  <!-- 引入fontawesom  -->
  <link rel="stylesheet" href="./assets/fontAwesome/css/font-awesome.css">
  <!-- 公共样式 -->
  <link rel="stylesheet" href="./css/common.css">
  <!-- 首页 自己的样式 -->
  <link rel="stylesheet" href="./css/searchList.css">
</head>

<body>
  <!-- 头部 -->
  <!-- mui-action-back 类 可以实现返回上一页  -->
  <header id="lt_header" class="mui-bar mui-bar-nav">
    <h1 class="mui-title">搜索列表</h1>
    <!-- bootstrap 辅助类 -->
    <!-- <a class="mui-icon  mui-icon-search mui-pull-right"></a> -->
    <a href="javascript:;" class="mui-action-back fa fa-arrow-left h_left"> </a>
  </header>

  <!-- 内容 -->
  <div class="lt_view">
    <div class="lt_contain">
      <!-- 搜索按钮 -->
      <div class="search">
        <div class="search_form">
          <input id="search_inp" placeholder="搜索你喜欢的商品" type="text">
          <button id="search_btn">搜索</button>
        </div>
      </div>

      <!-- 排序栏 -->
      <div class="sort_bar">
        <a href="javascript:;">
        上架时间
        <span class="fa fa-angle-down"></span>
      </a>
        <a data-sortkey="price" href="javascript:;">
        价格
        <span class="fa fa-angle-down"></span>
      </a>
        <a data-sortkey="num" href="javascript:;">
        销量
        <span class="fa fa-angle-down"></span>
      </a>
        <a href="javascript:;">
        折扣
        <span class="fa fa-angle-down"></span>
      </a>
      </div>
      <!-- 商品列表 -->
      <div class="goods_list">
        <ul></ul>
      </div>
    </div>
  </div>
  <!-- 尾部 -->
  <div class="foot">
    <a class="shouye active" href="javascript:;">
      <span class="fa fa-home"></span>
      <h3>首页</h3>
    </a>
    <a class="fenlei" href="category.html">
      <span class="fa fa-bars"></span>
      <h3>分类</h3>
    </a>
    <a class="cart" href="javascript:;">
      <span class="fa fa-cart-plus"></span>
      <h3>购物车</h3>
    </a>
    <a class="info" href="javascript:;">
      <span class="fa fa-user"></span>
      <h3>会员中心</h3>
    </a>
  </div>

  <!-- 模板 -->
  <script id="mainTpl" type="text/html">
    <!-- <ul> -->
    {{each arr value index}}
    <li>
      <img src="{{value.pic[0].picAddr}}" alt="">
      <div class="goods_name">{{value.proName}}</div>
      <div class="goods_price">
        <span class="new_price">￥{{value.price}}</span>
        <del>￥{{value.oldPrice}}</del>
      </div>
      <div>{{value.num}}</div>
      <a type="button" class="mui-btn mui-btn-primary"  href='./product.html?productId={{value.id}}'>立即购买</a>
    </li>
    {{/each}}
    <!-- </ul> -->
  </script>
  <!-- 模板 -->

</body>
<!-- mui js  不依赖其他 -->
<!-- bootstrap- 基于jquery -->
<script src="./assets/mui/js/mui.js"></script>
<!-- 模板 -->
<script src="./assets/arttemplate/template-web.js"></script>

</script>
<!-- zepto 方面我们自己开发 -->
<script src="./assets/zepto/zepto.js"></script>
<!-- 公共的js common.js -->
<script src="./js/common.js"></script>
<!-- 自己的js search.js -->
<script src="./js/searchList.js"></script>

</html>